<template>
  <div class="foot_box bg_3D4754 border_0">

    <!--PC bottom-->
    <div class="pc_bottom_box">
      <div class="foot row width_1108 text-left col_fff margin_0_auto">
        <!--产品与服务-->
        <div class="foot_left col-md-4 font_14">
          <div class="products_box">
            <p class="font_18 margin_bottom_20">产品服务</p>
            <p @click="fun_huoke" class="pointer">获客宝</p>
            <p @click="fun_xiaoshou" class="pointer">销售宝</p>
            <p @click="fun_tuiguang" class="pointer">推广宝</p>
            <p @click="fun_kelianke" class="pointer">客连客</p>
          </div>
        </div>
        <!--联系我们-->
        <div class="foot_center col-md-4 font_14">
          <div class="contect_box">
            <p class="font_18 margin_bottom_20">联系我们</p>
            <p class="">服务热线</p>
            <p class="font_24" style="margin-top: 18px">021-67680297</p>
            <p class="" STYLE="margin-top: 10px">周一至周六 9:00-18:00</p>
            <p>上海市松江区新雅创业园</p>
          </div>
        </div>
        <!--关于我们-->
        <div class="foot_right col-md-4">
          <div class="follow_box">
            <p class="font_18 margin_bottom_20 margin_top_20">关注我们</p>
            <div class="qrcode_box margin_top_20">
              <img src="http://image.xuemei99.com/code_pic_home.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
      <!--版权-->
      <div class="copyright_box font_14 col_fff">
         Copyright &#169 2015-2018 学妹. 蜀ICP备15019096号.
        <span class="margin_left_10">成都学妹科技有限公司 版权所有</span>
      </div>
    </div>

    <!--移动端bottom-->
    <div class="bg_3D4754 mobile_bottom">

      <!--产品与服务-->
      <div class="mobile_bottom_products_box">
        <p class="text-left">产品与服务</p>
        <ul class="text-left mobile_bottom_products clear">
          <li @click="fun_huoke">获客宝</li>
          <li class="text-center" @click="fun_xiaoshou">销售宝</li>
          <li class="text-right" @click="fun_tuiguang">推广宝</li>
          <li @click="fun_kelianke">客连客</li>
        </ul>
      </div>

      <!--联系我们-->
      <div class="mobile_bottom_products_box">
        <p class="text-left">联系我们</p>
        <ul class="text-left mobile_bottom_contacts clear">
          <li>服务热线：<a href="tel://021-67680297" class="coll_phone">021-67680297</a></li>
          <li>服务时间：周一至周六 9:00-18:00</li>
          <li>公司地址：上海市松江区新雅创业园</li>
        </ul>
      </div>

      <!--关注我们-->
      <div class="mobile_bottom_products_box">
        <p class="text-left">关注我们</p>
        <div class="mobile_follow_qrcode">
          <img src="http://image.xuemei99.com/gongzhonghao_pic_home.png" alt="">
        </div>
      </div>

      <!--横线-->
      <p class="mobile_bottom_line"></p>

      <!--版权-->
      <div class="font_14">
        <p class="margin_top_20">Copyright &#169 2015-2018 学妹. 蜀ICP备15019096号.</p>
        <p class="margin_top_10">成都学妹科技有限公司 版权所有 </p>
      </div>
    </div>

  </div>
</template>

<script>
  //每个子组价都需要抛出
  export default{
      name:"foot",
      methods:{
          fun_huoke(){
              this.$router.push({path:'/huoke'})
          },
          fun_xiaoshou(){
            this.$router.push({path:'/market'})
          },
          fun_tuiguang(){
//              this.$router.push({path:'/extension'})
          },
          fun_kelianke(){
            this.$router.push({path:'/kelianke'})
          }
      }
  }
</script>

<style scoped>
  .foot{
    padding-top: 50px;
  }
  .foot_box{
    margin-top: -1px;
  }
  .foot_center{
    border-left: 1px solid #EAECEF;
    border-right: 1px solid #EAECEF;
  }
  .products_box{
    width: 25%;
    margin: 0 auto;
  }
  .products_box p{
    margin-top: 20px;
  }
  .contect_box{
    width: 60%;
    margin: 0 auto;
  }
  .contect_box p{
    margin-top: 20px;
  }
  .follow_box{
    width: 50%;
    margin: 0 auto;
  }
  .qrcode_box{
    width: 120px;
    height: 120px;
    padding: 3px;
  }
  .qrcode_box img{
    width: 100%;
    height: 100%;
  }
  .copyright_box{
    margin-top: 40px;
    padding-bottom: 20px;
  }


  .mobile_bottom{
    border: 1px solid rgba(0,0,0,0);
    margin-top: 40px;
    padding: 0px 15px 70px 15px;
    color: #ffffff;
  }
  .mobile_bottom_products_box{
    margin-top: 40px;
  }
  .mobile_bottom_products,.mobile_bottom_contacts{
    color: #9EA3A9;
    margin-top: 5px;
    padding: 0;
  }
  .mobile_bottom_products li{
    width: 33.333%;
    margin-top: 20px;
  }
  .mobile_bottom_contacts li{
    width: 100%;
    margin-top: 20px;
  }
  .mobile_follow_qrcode{
    margin-top: 24px;
    width: 120px;
  }
  .mobile_follow_qrcode img{
    width: 100%;
  }
  .mobile_bottom_line{
    margin-top: 40px;
    height: 1px;
    border-bottom: 1px solid #ffffff;
    margin-right: -15px;
    margin-left: -15px;
  }
  .coll_phone{
    text-decoration: underline;
  }
</style>
